<!-- 主页 -->
<template>
  <div>
    <ChooseShow :menus="menus" :columns="columns" :tabledata="tabledata" @GetTableId="GetTableId">
      <div slot="operation">
        <Button type="primary" @click="add" size="small">登录</Button>
        <p @click="asd">123123231</p>
      </div>
    </ChooseShow>
    <Button @click="modal12 = true" type="primary">点击编辑</Button>
    <Modal
      class="ModalForm"
      width="50%"
      v-model="modal12"
      scrollable
      title="自定义测试"
      @on-ok="Commit()"
    >
      <PopForm ref="PopForm" :fromData="fromData"></PopForm>
    </Modal>
  </div>
</template>

<script>
import PopForm from "../components/PopForm";
import ChooseShow from "../components/ChooseShow";
import fromData from "../const/index";
import show01 from "../const/chooseshow";
export default {
  name: "",
  data() {
    return {
      modal12: false,
      fromData: {},
      tabledata: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ],
      columns: [],
      menus: [
        {
          name: "1",
          title: "内容管理",
          menuitem: [
            { title: "文章管理" },
            { title: "评论管理" },
            { title: "举报管理" }
          ]
        },
        {
          name: "2",
          title: "用户管理",
          menuitem: [{ title: "新增用户" }, { title: "活跃用户" }]
        },
        {
          name: "3",
          title: "统计分析",
          menuitem: [
            { title: "新增和启动" },
            { title: "活跃分析" },
            { title: "时段分析" }
          ]
        }
      ]
    };
  },
  components: {
    PopForm,
    ChooseShow
  },
  watch: {
    "$store.state.demoValue.Login": function(data) {
      if (data.Code == 0) {
        console.log("登录成功");
        console.log(data);
      } else {
        this.$message.error(data.Message);
      }
    }
  },
  methods: {
    // 表格上方筛选slot的事件回调
    add() {
      let obj = {
        MN: "Login",
        RequestId: 1,
        UserId: 1,
        DataContent: {
          UserName: "admin",
          PassWord: "123456"
        }
      };
      this.MIX_send(obj);
    },
    // 表格上方筛选slot的事件回调
    asd() {
      this.tabledata = [
        {
          name: "John Brown",
          age: 180,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03"
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01"
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02"
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04"
        }
      ];
    },
    // 表格操作事件的回调
    check(val) {
      console.log(val);
    },
    // 左侧导航栏事件的回调
    GetTableId(val) {
      console.log(val);
    },
    // 弹出框表单提交
    Commit() {
      console.log(this.$refs.PopForm.value);
    },
    // 弹出框底部标签页组件事件的回调
    edit(val) {
      console.log(val);
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.fromData = fromData(this);
    this.columns = show01(this).columns;
    // console.log(show01);
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>